<template>
    <div class="container">
        <div class="header">
            <Header :opacity="0.8"></Header>
        </div>
        <div class="content">
            <div class="crumbs">首页 > 活动意义</div>
            <div class="group">
                <div class="title">
                    活动意义
                </div>
                <div class="text">
                    弘扬中华优秀传统文化，发扬爱国主义精神，加强青少年交流学习，促进书画艺术发展，推动全民美育素质提高，
                    引导青少年感受伟大祖国的大好河山，以自己的独特的视角，通过书法、绘画、手工、摄影等形式来表达生活中和心中的真善美，
                    激发青少年爱国主义精神，为祖国的繁荣昌盛贡献自己的力量。
                </div>
            </div>
            <div class="group">
                <div class="title">
                    活动交流
                </div>
                <div class="longImg">
                    <el-carousel trigger="click" height="25vw" indicator-position="none">
                        <el-carousel-item>
                            <img class="banner" src="../../../public/images/meaning-15.png" alt="" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img class="banner" src="../../../public/images/meaning-16.png" alt="" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img class="banner" src="../../../public/images/meaning-17.png" alt="" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img class="banner" src="../../../public/images/meaning-18.png" alt="" />
                        </el-carousel-item>
                        <el-carousel-item>
                            <img class="banner" src="../../../public/images/meaning-19.png" alt="" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>

        <div class="footer">
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'meaning',
    data() {
        return {

        }
    },
    components: {
        Header, Footer
    },
    methods: {
    }
}
</script>
<style scoped>
.container {
    width: 100%;
}

.content {
    width: 100%;
    padding-top: 3vw;
    background-image: url('./images/introduced_background-10.png');
    background-size: 100% 100%;
    position: relative;
}

.group {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vw;
}

.crumbs {
    font-size: 18px;
    position: absolute;
    top: 3vw;
    left: 10vw;
}

.title {
    width: 20vw;
    height: 3vw;
    margin: 5vw 0;
    margin-bottom: 3vw;
    font-size: 1.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-image: url('../../assets/images/all_title.png');
}

.text {
    width: 70%;
    text-align: center;
    font-size: 1vw;
    letter-spacing: 8px;
    line-height: 50px;
    text-indent: 2em;
}

.longImg {
    width: 80%;
    margin: 0 auto;
}

.el-carousel__item img{
    width: 100%;
}

.footer {
    height: 15vw;
}


/* 手机/小屏幕 */
@media screen and (max-width: 960px) {
    .content {
        padding-top: 8vw;
    }

    .crumbs {
        margin: 3vw;
        margin-left: 10vw;
        font-size: 12px;
    }

    .title img {
        width: 40vw;
        margin-bottom: 5vw;
    }

    .title {
        width: 40vw;
        height: 6vw;
        margin: 5vw 0;
        margin-bottom: 3vw;
        font-size: 24px;
    }

    .text {
        width: 90%;
        font-size: 16px;
        letter-spacing: 6px;
        line-height: 40px;
    }

    .subtitle {
        width: 40vw;
        font-size: 18px;
    }

    .footer {
        height: 30vw;
    }
}
</style>